<template>
  <div class="friend_container padd100">
    <el-row :gutter="20">
      <el-col :lg="19" style="margin-bottom:20px">
        <!-- 动态 -->
        <div class="comment_container">
          <div class="top_b_m_tit" style="margin-top: 20px">
            <div class="left_tit">
              <div style="font-size:24px;color:#333;">动态</div>
            </div>
          </div>
          <div class="friend_wrapper" v-loading="loading" element-loading-text="正在玩命加载...">
            <event v-for="(item, index) in eventData.event" :item="item" @getData="init(true)" />
          </div>
        </div>
      </el-col>
      <el-col :lg="5">
        <div class="r_f_container">
          <el-card class="box-card" shadow="never">
            <div class="user_info">
              <div class="u_left cursor_class">
                <img :src="userDetail.avatarUrl" alt="">
              </div>
              <div class="u_right text_ellipsis">
                <span class="cursor_class text_decoration text_ellipsis">{{ userDetail.nickname }}</span>
              </div>
            </div>
            <div class="f_cb">
              <div class="f_item cursor_class" @click="router.push(`/user-home/${userDetail.userId}`)">
                <div class="top_num">{{ userDetail.eventCount }}</div>
                <div class="bottom_desc">动态</div>
              </div>
              <div class="f_item cursor_class" @click="router.push(`/user-home/${userDetail.userId}?activeName=second`)">
                <div class="top_num">{{ userDetail.follows }}</div>
                <div class="bottom_desc">关注</div>
              </div>
              <div class="f_item cursor_class" @click="router.push(`/user-home/${userDetail.userId}?activeName=third`)">
                <div class="top_num">{{ userDetail.followeds }}</div>
                <div class="bottom_desc">粉丝</div>
              </div>
            </div>
          </el-card>
          <!-- <div class="mx_user_wrapper">
            <div class="mx_user_tit">
              <h3 class="mx_tit">明星用户</h3>
              <el-button link>换一批</el-button>
            </div>
            <div class="mx_content">
              <div class="mx_item" v-for="item in 3" :key="item">
                <div class="lt_mx_wrap">
                  <div class="lt_mx_avatar">
                    <img src="http://p1.music.126.net/jWMSLAHOp6ka68tGEvbaDQ==/109951167727953286.jpg?param=45y45"
                      alt="">
                  </div>
                  <div class="center_mx_info cursor_class text_decoration text_ellipsis">
                    <div class="mx_name text_ellipsis">
                      叶蓓
                    </div>
                    <div class="mx_cate text_ellipsis">知名女歌手</div>
                  </div>
                </div>
                <div class="rt_btn">
                  <el-button type="primary" :icon="Plus" size="small">关注</el-button>
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue'
import * as friendApi from '@/api/friend'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { reactive, ref, onMounted, onUnmounted, getCurrentInstance } from 'vue'
import CommentComponent from "@/components/Comment/index"
import { detail } from "@/api/userinfo";
import event from "@/components/Event/index"
const { proxy }: any = getCurrentInstance()
const router = useRouter()
const loading = ref<boolean>(false)
const eventData = reactive<any>({
  lasttime: -1,
  event: [],
  more: true,
})
const userDetail = reactive({
  userId: null,
  avatarUrl:'',
  nickname: '',
  eventCount: 0,
  follows: 0,
  followeds: 0
})
const init = async (isFrist: Boolean = false) => {
  try {
    let cookie = localStorage.getItem('cookie')
    let userInfo = proxy.$getUserInfo()
    if (userInfo && cookie) {
      window.removeEventListener('scroll', scrollbottom);  //页面离开后销毁监听事件
      loading.value = true
      // 是否重新请求
      if(isFrist) {
        eventData.lasttime = -1
        eventData.event = []
        eventData.more = true
      }
      const data: any = await friendApi.event({ pagesize: 20, cookie, lasttime: eventData.lasttime })
      eventData.lasttime = data.lasttime
      eventData.more = data.more
      if(data.more) {
        window.addEventListener('scroll', scrollbottom);  //页面加载时监听滚动事件
      }
      data.event.forEach((item: any) => {
        item.json = JSON.parse(item.json)
        item.commentVisible = false
        // 转发
        if(item.json.event){
          item.json.event.json = JSON.parse(item.json.event.json)
          item.json.event.commentVisible = false
        }
      });
      eventData.event = [...eventData.event, ...data.event]
      const data2: any = await detail({ uid: userInfo.userId })
      userDetail.userId = data2.profile.userId
      userDetail.avatarUrl = data2.profile.avatarUrl
      userDetail.nickname = data2.profile.nickname
      userDetail.eventCount = data2.profile.eventCount
      userDetail.follows = data2.profile.follows
      userDetail.followeds = data2.profile.followeds
    } else {
      ElMessage({
        message: '请先登录',
        type: 'error',
      })
      router.push("/")
    }
  } catch (error) {
    router.push("/")
    console.log(error);
  } finally {
    loading.value = false
  }
}
const scrollbottom = () => {
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  let clientHeight = document.documentElement.clientHeight;
  let scrollHeight = document.documentElement.scrollHeight;
  if (scrollTop + clientHeight >= scrollHeight - 300 && eventData.more) {
    eventData.more = false // 防止触发多次
    init()
  }
}
onMounted(() => {
  init()
})
onUnmounted(() => {
  window.removeEventListener('scroll', scrollbottom);  //页面离开后销毁监听事件
})
</script>
<style lang="scss" scoped>
.friend_container {
  margin-top: 20px;

  .comment_container {
    .top_b_m_tit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px solid #409eff;
      padding-bottom: 10px;
    }

    .friend_wrapper {
      padding: 20px 0;
    }
  }
}

.r_f_container {
  .user_info {
    display: flex;
    overflow: hidden;

    .u_left {
      width: 68px;
      height: 68px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .u_right {
      margin-left: 10px;
      font-weight: 700;
      color: #333;
      flex: 1;
      overflow: hidden;
    }
  }

  .f_cb {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;

    .f_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      flex: 1;
      color: #666;
      border-right: 1px solid #c2c2c2;

      &:hover {
        .top_num {
          color: #409eff;
        }

        .bottom_desc {
          color: #409eff;
        }
      }

      &:last-child {
        border-right: none;
      }

      .top_num {
        font-size: 20px;
      }

      .bottom_desc {
        margin-top: 10px;
      }
    }
  }

  .mx_user_wrapper {
    margin-top: 30px;

    .mx_user_tit {
      padding-bottom: 10px;
      border-bottom: 1px solid #dcdcdc;
      display: flex;
      justify-content: space-between;

      .mx_tit {
        margin: 0;
        font-size: 14px;
      }
    }

    .mx_content {
      .mx_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0;

        .lt_mx_wrap {
          display: flex;
          overflow: hidden;

          .lt_mx_avatar {
            width: 45px;
            height: 45px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .center_mx_info {
            font-size: 14px;
            margin: 0 10px;

            .mx_name {}

            .mx_cate {
              color: #666;
              margin-top: 4px;
            }
          }
        }
      }
    }
  }
}
</style>
